<template>
  <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
    <el-radio-button :value="false" :onclick="handleOpen">expand</el-radio-button>
    <el-radio-button :value="true">collapse</el-radio-button>
  </el-radio-group>
  <el-col :span="12">
    <el-menu router unique-opened default-active="1" class="el-menu-vertical-demo" :collapse="isCollapse"
      @open="handleOpen" @close="handleClose"  >
      <el-sub-menu :index="val.value.index" v-for='val in MenuInfo' :key='val'  >
        <template #title>
          <el-icon>
            <component :is="val.value.icon" />
          </el-icon>
          <span>{{ val.value.title }}</span>
        </template>
        <el-menu-item :index="item.index" v-for="item in val.value.children" :key="item.index" @click="handleclick(item.title,item.type)">
          <template #title>{{ item.title }}
          </template>
        </el-menu-item>
      </el-sub-menu>
    </el-menu>
  </el-col>
</template>

<script setup>
import { ref, toRefs ,defineEmits} from 'vue'
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'
import { subMenuProps } from 'element-plus';
const emit = defineEmits(['devInfo'])
const isCollapse = ref(false)
const props = defineProps({
  menuobj: { type: Object }
}
)

const MenuInfo = toRefs(props.menuobj)
const handleOpen = (key, keyPath) => {
  console.log("open",key,keyPath)
}
const handleClose = (key, keyPath) => {
  console.log("close",key,keyPath)
}
const handleSelect = (key, keyPath,item,routeResult) => {
  console.log("select",key, keyPath,item,routeResult)
}
const handleclick = (title,type) => {
  // console.log("click",title,type)
  emit('devInfo', title,type)
}
</script>

<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 75vh;
}

.el-radio-button{
  width: 100px;
  height: 6vh;
}

.el-radio-button span{
  width: 100px;
  height: 6vh;
}
</style>